<template>
  <div class="decorate-goodsParams" :style="{padding:tplItemData.modulePadding || 5 + 'px 0'}">
    <div class="goods-params-container">
      <div class="goods-params-title">产品参数</div>
      <div class="goods-params-lists-box" v-if="goodsParamsList.length>0">
        <div class="goods-params-lists">
          <div v-for="(item,index) in goodsParamsList" :key="index" class="list-item" v-show="index<showLength">
            <div class="label">{{item.showtitle}}</div>
            <div class="desc" v-html="item.desc"></div>
          </div>
        </div>
        <div class="show_more" v-if="goodsParamsList.length>8 && goodsParamsHide" @click="showMore(1)"><span>查看更多</span><svg-icon icon-class="icon_right" class="all-class-icon"></svg-icon></div>
        <div class="hide_more" v-else-if="goodsParamsList.length>8 && !goodsParamsHide" @click="showMore(2)"><span>点击收起</span><svg-icon icon-class="icon_right" class="all-class-icon"></svg-icon></div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    components: {
    },
    data() {
      return {
        goodsParamsHide: true,
        showLength: 8, // 最多显示8条
        goodsParamsList: []
      }
    },
    props: {
      tplItemData: {
        type: Object, // 传入参数的类型
        default: () => {
          return {}
        }
      }
    },
    updated() {
      this.goodsParamsList = this.tplItemData.dataset
    },
    created() {
      this.goodsParamsList = this.tplItemData.dataset
    },
    methods: {
      showMore(type) {
        this.goodsParamsHide = !this.goodsParamsHide
        if (type == 1) {
          this.showLength = this.goodsParamsList.length
        } else {
          this.showLength = 8
        }
      }
    }
  })
</script>

<style lang='scss'>
.decorate-goodsParams{
  margin:20px 0;
  .goods-params-container{
    border-radius:20px;
    color:#333;
    background:#fff;
  }
  .goods-params-title{
    font-size:28px;
    text-align:center;
    padding:30px 0;
  }
  .goods-params-lists{
    overflow:hidden;
    .list-item{
      display:flex;
      padding:26px 30px;
      line-height:40px;
      border-top:2px solid #EDEDED;
      .label{
        width: 200px;
        font-size:28px;
        color:#1A1A1A;
      }
      .desc{
        flex:1;
        margin-left:34px;
        font-size:26px;
        color:#999999;
      }
    }
  }
  .show_more,.hide_more{
    height:90px;
    line-height:90px;
    border-top:2px solid #EDEDED;
    font-size:24px;
    text-align:center;
    color:#666;
    span{
      margin-right:6px;
    }
    .all-class-icon{
      font-size:20px;
      transform: rotate(90deg);
      vertical-align: 0px;
    }
  }
  .hide_more{
    .all-class-icon{
      transform: rotate(-90deg);
    }
  }
}
</style>
